<template>
	<view class="bookDetail">
		<image class="background" src="../../static/shengxu.jpg" mode=""></image>
		<view class="nav">
			<uni-icon class="icon" type="back" style="font-size:28px"></uni-icon>
			<view class="rightPart">
				<uni-icon class="icon" type="chatbubble" style="font-size:28px;color:#ff0000ba"></uni-icon>
				<uni-icon class="icon" type="paperplane" style="font-size:28px"></uni-icon>
			</view>
		</view>
		<view class="panel">
			<view class="detail">
				<image class="novelImg" src="../../static/shengxu.jpg" mode=""></image>
				<view class="bookMessage">
					<view class="title">
						圣墟
					</view>
					<view class="author">
						<text style="color:red">青衫烟雨</text>|<text>玄幻</text>
					</view>
					<view class="count">
						<text>147万字</text>|<text>5书币/千字</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomNav">
			<view class="update">
				追更新
			</view>
			<view class="startReading" @click="startReading">
				开始阅读
			</view>
			<view class="downloading">
				下载
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniNavBar,
		uniIcon
	} from "@dcloudio/uni-ui"
	export default {
		components: {
			uniNavBar,
			uniIcon
		},
		data() {
			return {

			};
		},
		methods:{
			startReading(){
				uni.navigateTo({
					url:'../readingPage/readingPage'
				})
			},
		}
	}
</script>

<style lang="scss">
	.bookDetail {
		.background {
			position: absolute;
			top: 0;
			width: 100%;
			filter: blur(20px);
			z-index: -1;
		}

		.nav {
			padding-top: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>.icon {}

			.rightPart {
				.icon {
					padding: 0 4px;
				}
			}
		}

		.panel {
			.detail {
				display: flex;
				padding: 18px 22px;

				.novelImg {
					width: 90px;
					height: 130px;
				}

				.bookMessage {
					font-size: 14px;
					padding: 5px;

					text {
						padding: 6px;
					}

					.title {
						padding-left: 6px;
						padding-bottom: 10px;
						font-size: 18px;
						font-weight: 600;
					}

					.author {
						margin-bottom: 4px;
					}
				}
			}

		}
		.bottomNav{
			display:flex;
			position: fixed;
			bottom:0;
			height: 60px;
			width: 100%;
			color: red;
			border-top:1px solid #eee;
			justify-content: space-between;
			view{
				display:flex;
				height: 100%;
				width: 33.3%;
				justify-content: center;
				align-items: center;
			}
			.startReading{
				background: red;
				color:white;
			}
		}
	}
</style>
